<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-image: url("/static/img/loginBackground.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
        }
        #outerBox{
            width: 40%;
            height: 60%;
            position: absolute;
            left: 30%;
            top: 20%;
            /*background-color: rgba(160,160,160,0.98);*/
            border-radius: 20px;
            background-color:rgba(160,160,160,0.95);
            box-shadow:2px 2px 10px 3px black  ;
        }
        #innerBox{
            width: 60%;
            height: 50%;
            position: absolute;
            left: 20%;
            top: 25%;
        }
        .inputLabel{
            font-size: 18px;
            color: white;
        }
        #loginBtn{
            display: inline-block;
            position: relative;
            width: 100%;
            margin-top: 20px;
            font-size: 18px;
            font-weight: 600;
            color: #8c8c8c;
        }

    </style>
</head>
<body>
<div id="outerBox">
    <div id="innerBox">
        <form onsubmit="return login()">
            <div class="form-group">
                <label for="userName" class="inputLabel">用户名</label>
                <input type="text" class="form-control" id="userName" placeholder="请输入账号">
            </div>
            <div class="form-group">
                <label for="password" class="inputLabel">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <button type="submit" id="loginBtn" class="btn btn-default">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
        </form>
    </div>
</div>

<script type="text/javascript" src="/static/bootstrap/bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function login() {
        var username = $("#userName").val();
        if (username == "" || username == null) {
            alert("用户名不能为空");
            return false;
        }
        var password = $("#password").val();
        if (password == "" || password == null) {
            alert("密码不能为空");
            return false;
        }
        $.ajax({
            url: '/user/queryUser',
            type: 'get',
            dataType: 'json',
            data: {
                "username": username,
                "password": password
            },
            success: function (data) {
                if (data.code == 0) {
                    alert("登录成功")
                    var user = data.data
                    localStorage.setItem("userName",user.userName)
                    localStorage.setItem("userPic",user.userPic)
                    location.href = "/html/index"
                } else {
                    alert("用户名或密码错误")
                }
            }
        })
        return false;
    }
</script>
</body>
</html>